import { createContext, useContext, useEffect, useState } from 'react'

// 预定义的主题颜色
export const themeColors = [
  {
    name: 'Zinc',
    value: 'zinc',
    cssVars: {
      light: {
        primary: 'oklch(0.21 0.006 285.885)',
        'primary-foreground': 'oklch(0.985 0 0)',
        ring: 'oklch(0.705 0.015 286.067)',
      },
      dark: {
        primary: 'oklch(0.92 0.004 286.32)',
        'primary-foreground': 'oklch(0.21 0.006 285.885)',
        ring: 'oklch(0.552 0.016 285.938)',
      },
    },
  },
  {
    name: 'Blue',
    value: 'blue',
    cssVars: {
      light: {
        primary: 'oklch(0.546 0.245 262.881)',
        'primary-foreground': 'oklch(0.97 0.014 254.604)',
        ring: 'oklch(0.746 0.16 232.661)',
      },
      dark: {
        primary: 'oklch(0.707 0.165 254.624)',
        'primary-foreground': 'oklch(0.97 0.014 254.604)',
        ring: 'oklch(0.707 0.165 254.624)',
      },
    },
  },
  {
    name: 'Green',
    value: 'green',
    cssVars: {
      light: {
        primary: 'oklch(0.546 0.245 142.495)',
        'primary-foreground': 'oklch(0.97 0.014 142.495)',
        ring: 'oklch(0.746 0.16 142.495)',
      },
      dark: {
        primary: 'oklch(0.707 0.165 142.495)',
        'primary-foreground': 'oklch(0.97 0.014 142.495)',
        ring: 'oklch(0.707 0.165 142.495)',
      },
    },
  },
  {
    name: 'Orange',
    value: 'orange',
    cssVars: {
      light: {
        primary: 'oklch(0.646 0.222 41.116)',
        'primary-foreground': 'oklch(0.97 0.014 41.116)',
        ring: 'oklch(0.746 0.16 41.116)',
      },
      dark: {
        primary: 'oklch(0.707 0.165 41.116)',
        'primary-foreground': 'oklch(0.97 0.014 41.116)',
        ring: 'oklch(0.707 0.165 41.116)',
      },
    },
  },
  {
    name: 'Red',
    value: 'red',
    cssVars: {
      light: {
        primary: 'oklch(0.577 0.245 27.325)',
        'primary-foreground': 'oklch(0.97 0.014 27.325)',
        ring: 'oklch(0.746 0.16 27.325)',
      },
      dark: {
        primary: 'oklch(0.704 0.191 22.216)',
        'primary-foreground': 'oklch(0.97 0.014 22.216)',
        ring: 'oklch(0.704 0.191 22.216)',
      },
    },
  },
  {
    name: 'Violet',
    value: 'violet',
    cssVars: {
      light: {
        primary: 'oklch(0.627 0.265 303.9)',
        'primary-foreground': 'oklch(0.97 0.014 303.9)',
        ring: 'oklch(0.746 0.16 303.9)',
      },
      dark: {
        primary: 'oklch(0.707 0.165 303.9)',
        'primary-foreground': 'oklch(0.97 0.014 303.9)',
        ring: 'oklch(0.707 0.165 303.9)',
      },
    },
  },
] as const

export type ThemeColor = (typeof themeColors)[number]['value']

type ThemeColorProviderProps = {
  children: React.ReactNode
  defaultThemeColor?: ThemeColor
  storageKey?: string
}

type ThemeColorProviderState = {
  themeColor: ThemeColor
  setThemeColor: (themeColor: ThemeColor) => void
}

const initialState: ThemeColorProviderState = {
  themeColor: 'zinc',
  setThemeColor: () => null,
}

const ThemeColorProviderContext = createContext<ThemeColorProviderState>(initialState)

export function ThemeColorProvider({
  children,
  defaultThemeColor = 'zinc',
  storageKey = 'ui-theme-color',
  ...props
}: ThemeColorProviderProps) {
  const [themeColor, setThemeColor] = useState<ThemeColor>(
    () => (localStorage.getItem(storageKey) as ThemeColor) || defaultThemeColor
  )

  useEffect(() => {
    const root = window.document.documentElement
    const selectedTheme = themeColors.find((theme) => theme.value === themeColor)
    
    if (selectedTheme) {
      // 移除之前的主题颜色类
      themeColors.forEach((theme) => {
        root.classList.remove(`theme-${theme.value}`)
      })
      
      // 添加新的主题颜色类
      root.classList.add(`theme-${themeColor}`)
      
      // 设置CSS变量
      const isDark = root.classList.contains('dark')
      const vars = isDark ? selectedTheme.cssVars.dark : selectedTheme.cssVars.light
      
      Object.entries(vars).forEach(([key, value]) => {
        root.style.setProperty(`--${key}`, value)
      })
    }
  }, [themeColor])

  const value = {
    themeColor,
    setThemeColor: (themeColor: ThemeColor) => {
      localStorage.setItem(storageKey, themeColor)
      setThemeColor(themeColor)
    },
  }

  return (
    <ThemeColorProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeColorProviderContext.Provider>
  )
}

export const useThemeColor = () => {
  const context = useContext(ThemeColorProviderContext)

  if (context === undefined)
    throw new Error('useThemeColor must be used within a ThemeColorProvider')

  return context
}
